<template>
  <div :class="{'mobile-help-list':showMobilePage, 'boxShadow': !showMobilePage}" class="help-list">
    <div v-if="!showMobilePage" class="help-list-btn">
      <el-button v-if="hasRouteAuth('crm:help:add') || isAdmin" type="primary" size="small" class="add-article" @click="addArticle">
        添加文章
        <i class="el-icon-plus" style="font-size: 16px;" />
      </el-button>
    </div>
    <p v-show="keyWord && list.total > 0" class="search-result">为你找到相关结果{{ list.total }}条</p>
    <div v-if="list.items.length > 0" class="article-list">
      <div v-for="(item) in list.items" :key="item.id" class="article-item">
        <div class="article-cell flex-one">
          <div class="table-title" @click="toHelpCheck(item)">{{ item.title }}</div>
          <div v-if="showMobilePage" class="mobile-time">{{ (item.updateTime / 1000) | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
        </div>
        <div v-if="!showMobilePage" class="article-cell">{{
        (item.updateTime / 1000) | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
        <div class="article-cell article-opeator">
          <div v-if="hasRouteAuth('crm:help:edit') || isAdmin" class="button-text" @click="toEdit(item)">编辑</div>
          <div
            v-if="hasRouteAuth('crm:help:del') || isAdmin"
            :class="{'bl': hasRouteAuth('crm:help:edit') || isAdmin}"
            class="button-text"
            @click="toDel(item)">删除</div>
        </div>
      </div>
    </div>
    <empty-placeholder v-else :empty-img="emptyArticle" :text="keyWord === ''?'暂未添加文章':'你搜索的关键词暂无内容，请换个试试'" :style="showMobilePage?'':'margin: 50px 0 24px'" image-size="120px"/>
    <el-row v-if="!showMobilePage" type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-show="list.total > 0"
        :current-page="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, pager,jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
    <fixed-pagination v-if="showMobilePage">
      <el-pagination
        v-show="list.total > 0"
        :current-page="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, next':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <el-button v-if="hasRouteAuth('crm:help:add') || isAdmin" type="primary" size="small" style="width:100%;" @click="addArticle">添加文章<i class="el-icon-plus" style="font-size: 16px;" /></el-button>
    </fixed-pagination>
  </div>
</template>
<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import emptyArticle from '@/assets/help/empty-article.png';
import { helpDel } from '@/api/help';
import { standardFormat } from '@/filters/date';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';

export default {
  components: { Title, EmptyPlaceholder },
  filters: { standardFormat },
  props: {
    modelName: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Object,
      default: () => {
        return {};
      }
    },
    listLoading: {
      type: Boolean,
      default: false
    },
    keyWord: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      emptyArticle
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAdmin() {
      return this.userInfo.userName === '管理员';
    }
  },
  methods: {
    hasRouteAuth,
    addArticle() {
      this.$router.push({
        name: 'helpCreate',
        query: { model: this.modelName }
      });
    },
    toHelpCheck(item) {
      this.$router.push({
        name: 'helpDetail',
        params: { id: item.id },
        query: { model: this.modelName }
      });
    },
    toEdit(row) {
      this.$router.push({
        name: 'helpEdit',
        params: { id: row.id }
      });
    },
    toDel(row) {
      this.$confirm('确定删除该文章？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: 'del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        helpDel(row.id).then(res => {
          this.$message.success('删除成功');
          this.$emit('update');
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => {});
    },
    handleSizeChange(perPage) {
      this.$emit('handleSizeChange', perPage);
    },
    handleCurrentChange(toPage) {
      this.$emit('handleCurrentChange', toPage);
    }
  }
};
</script>
<style lang="scss" scope>
.help-list {
  position: relative;
  margin: 16px 16px 0 16px;
  background: #FFFFFF;
  height: calc(100vh - 140px - 56px - 32px);
  &.mobile-help-list {
    width: 100%;
    height: calc(100vh - 220px) !important;
    margin: 0;
    padding: 0;
    .article-list {
      height: 100%;
    }
  }
  &.boxShadow {
    box-shadow: 2px 4px 10px #DDE1EA;
  }
  opacity: 1;
  width: 100%;
  border-radius: 4px;
  padding: 82px 24px 0;
  .help-list-btn {
    position: absolute;
    top: 20px;
    right: 24px;
    .add-article {
      width: 88px;
      height: 32px;
      padding: 0px 0 2px;
      border-radius: 4px;
    }
  }
}
.article-list {
  height: calc(100% - 48px);
  @include scrollBar($x: hidden, $y:auto, $width: 4px);
  .article-item {
    @include flexStyle($align: center);
    font-size: 14px;
    color: #333333;
    padding: 12px 0;
    border-bottom: 1px solid #ebeefd;
    .flex-one {
      width: 0;
      flex: 1;
    }
  }
  .article-cell {
    margin-right: 20px;
    flex-shrink: 0;
  }
  .article-opeator {
    @include flexStyle();
  }
}

.search-result{
  margin: 0 0 10px;
  color: #acacac;
  font-size: 14px;
}
.table-title {
  text-decoration: underline;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  &:hover {
    color: #406eff;
  }
}
.mobile-time {
  color: #999;
  font-size: 10px;
}
</style>
